<template>
  <div class="AddCommodity" style="min-width: 1200px">
    <div><h4 v-if="isEditGoods">编辑商品</h4><h4 v-else-if="isCopyGoods">复制商品</h4><h4 v-else>新增商品</h4></div>
    <div class="ele-content">
      <el-form :model="form" :rules="rules" label-position="right" label-width="110px">
        <el-form-item label="商品名称:" prop="commodityName">
          <el-col :span="24">
            <el-input v-model="form.commodityName" placeholder="请输入商品名称" maxlength="20" show-word-limit class="cus-input" />
          </el-col>
        </el-form-item>
        <el-form-item label="名称标签:" prop="commodityNameTag">
          <el-col :span="24">
            <el-input v-model="form.commodityNameTag" placeholder="请输入商品名称标签" maxlength="6" show-word-limit class="cus-input" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="小程序商品详情页面，商品名称前面显示的橙色文本"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="商品亮点:" prop="commodityHighlights">
          <el-col :span="24">
            <el-input v-model="form.commodityHighlights" placeholder="请输入商品亮点描述" maxlength="20" show-word-limit class="cus-input" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="小程序商品详情页面，商品主图下面显示的简短描述文本"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="商品图片:" prop="commodityImage">
          <el-col :span="24">
            <el-upload
              :action="uploadPath"
              list-type="picture-card"
              accept=".jpg,.png"
              class="ele-col-upload"
              :data="{path:path,fileType: 8}"
              :before-upload="beforeAvatarUpload"
              :on-success="uploadCommodityUrl"
              :limit="limitCount"
              :on-change="isOverLimit"
              :on-remove="onRemove"
              :class="{hide:hideUpload}"
              :file-list="form.commodityImage"
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="可上传jpg、png格式的图片，推荐尺寸：750x750像素，最多可上传五张，单张图片文件大小限制2MB以内，第一张图为商品主图，显示在商品列表首页和其它页面。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="主图视频:" prop="commodityVideo">
          <el-col :span="24">
            <el-upload
              class="ele-col-upload"
              :action="uploadPath"
              accept=".mp4"
              :data="{path:path,fileType: 4}"
              :on-progress="uploadVideoProcess"
              :on-success="handleVideoSuccess"
              :before-upload="beforeUploadVideo"
              :show-file-list="false"
              :list-type="form.commodityVideo !='' && !videoFlag ? 'text' : 'picture-card'"
            >
              <video
                v-if="form.commodityVideo !='' && !videoFlag"
                :src="form.commodityVideo"
                style="width: 148px; height: 148px;"
                controls="controls"
              >
                您的浏览器不支持视频播放
              </video>
              <i
                v-else-if="form.commodityVideo ==='' && !videoFlag"
                class="el-icon-plus avatar-uploader-icon"
              />
              <el-progress
                v-if="videoFlag === true"
                type="circle"
                :percentage="videoUploadPercent"
                style="margin-top:7px;"
              />
            </el-upload>
            <el-button v-if="form.commodityVideo !='' && !videoFlag" type="danger" icon="el-icon-delete" @click="form.commodityVideo =''">删除主图视频</el-button>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="可上传mp4格式的视频，视频文件大小限制50MB以内。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="商品分类:" prop="commodityClass">
          <el-col :span="24">
            <el-cascader
              v-model="form.commodityClass"
              class="cus-input"
              :options="classOptions"
              :props="{ checkStrictly: true }"
              clearable
              @change="changeClass"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="商品标签:" prop="commodityLabel">
          <el-col :span="24">
            <el-select
              v-model="form.commodityLabel"
              multiple
              placeholder="添加商品标签，可添加多个商品标签"
              class="cus-input"
              clearable
            >
              <el-option
                v-for="(item, index) in labelOptions"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="商品类型:" prop="commodityType">
          <el-radio-group v-model="form.commodityType">
            <el-radio-button label="sale">售卖商品</el-radio-button>
            <el-radio-button label="lease">租赁商品</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="加入推广:" prop="radio">
          <el-radio-group v-model="form.radio">
            <el-radio-button label="1">是</el-radio-button>
            <el-radio-button label="0">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <div class="ele-proportion">
            <el-radio-group v-if="form.radio==='1'" v-model="form.radio1">
              <el-radio
                label="0"
              >推广分成比例:</el-radio><el-input-number
                v-model="form.percent"
                :disabled="form.radio1==='0'?false:true"
                :controls="false"
                :precision="0"
                :min="0"
                :max="100"
                placeholder="百分比"
              />
              <el-radio
                label="1"
                style="margin-left: 20px"
              >推广固定分成:</el-radio><el-input-number
                v-model="form.fix"
                :disabled="form.radio1==='1'?false:true"
                :controls="false"
                :precision="2"
                :min="0"
                :max="100000"
                placeholder="单位元"
              />
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="成本价格:" prop="cost">
          <el-col :span="24">
            <el-input-number
              v-model="form.cost"
              placeholder="请输入成本价格，单位元"
              :controls="false"
              :precision="2"
              :disabled="disabled"
              :min="0"
              :max="100000"
            />
            元
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="根据该成本价格计算利润分成"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="原价价格:" prop="originalPrice">
          <el-col :span="24">
            <el-input-number
              v-model="form.originalPrice"
              :controls="false"
              :disabled="disabled"
              :precision="2"
              placeholder="请输入原价价格，单位元"
              :min="0"
              :max="100000"
            />
            元
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="商品显示的划线价格"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item v-if="form.commodityType=='sale'" label="开启会员价:" prop="originalPrice">
          <el-col :span="24">
            <el-radio-group v-model="form.vIPPrice">
              <el-radio-button label="1">是</el-radio-button>
              <el-radio-button label="0">否</el-radio-button>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item v-if="form.commodityType==='lease'" label="预付金价格:" prop="prepaymentPrice">
          <el-col :span="24">
            <el-input-number
              v-model="form.prepaymentPrice"
              :controls="false"
              :disabled="disabled"
              :precision="2"
              placeholder="请输入预付金价格，单位元"
              :min="0"
              :max="100000"
            />
            元
          </el-col>
        </el-form-item>
        <el-form-item v-if="form.commodityType==='lease'">
          <el-col :span="24">
            <el-alert
              title="租赁商品需支付的预付金价格（不含运费、配送费等）"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="价格后缀:" prop="priceAfter">
          <el-col :span="24">
            <el-input
              v-model="form.priceAfter"
              placeholder="请输入价格后缀"
              maxlength="2"
              style="max-width: 200px;"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="显示在商品价格后面，例如：天起、件、月起、起租、起"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="商品重量:" prop="weight">
          <el-col :span="24">
            <el-input-number
              v-model="form.weight"
              :min="0"
              :max="1000000"
              :controls="false"
              :disabled="disabled"
              placeholder="请输入商品重量，单位克"
            />
            克
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="商品重量用于运费模板中按商品重量计费时，计算运费。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="商品体积:" prop="tiji">
          <el-col :span="24">
            <div class="goods-tiji">
              <div class="goods-tiji-item">
                <el-input-number
                  v-model="form.length"
                  :min="0"
                  :max="10000"
                  :controls="false"
                  :disabled="disabled"
                  placeholder="商品外包装长度"
                  class="goods-tiji-item-chang"
                />
              </div>
              <div class="goods-tiji-item">
                <el-input-number
                  v-model="form.width"
                  :min="0"
                  :max="10000"
                  :controls="false"
                  :disabled="disabled"
                  placeholder="商品外包装宽度"
                  class="goods-tiji-item-kuan"
                />
              </div>
              <div class="goods-tiji-item">
                <el-input-number
                  v-model="form.height"
                  :min="0"
                  :max="10000"
                  :controls="false"
                  :disabled="disabled"
                  placeholder="商品外包装高度"
                  class="goods-tiji-item-gao"
                />
              </div>
            </div>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="商品体积用于运费模板中按商品体积计费时，计算运费。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="分享描述:" prop="share">
          <el-col :span="24">
            <el-input v-model="form.share" placeholder="请输入分享描述" maxlength="40" show-word-limit class="cus-input" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="小程序中分享商品时的描述文字，如果不填写，将显示默认描述。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="商品规格:" required>
          <el-col :span="24">
            <GoodsSku
              ref="goodsSku"
              :lease-goods="form.commodityType === 'lease'"
              :is-show-vip="form.vIPPrice === '1'"
              :can-edit-sku="!isEditGoods"
              :sku-form-data="{
                regualrList: regualrList ? regualrList : []
              }"
              :regualr-combo="regualrCombo? regualrCombo : []"
              @change="changeGoodsSku"
            />
          </el-col>
        </el-form-item>

        <el-form-item label="附加规格:">
          <el-col :span="24">
            <ExtendsSku
              ref="extendsSku"
              :can-edit-sku="!isEditGoods"
              :sku-form-data="{
                extral: extral ? extral : []
              }"
            />
          </el-col>
        </el-form-item>
        <!-- 商品详情 -->
        <el-form-item label="商品详情:" prop="commodityDetail" class="ele-commdity-detail">
          <el-row v-if="form.commodityDetail != null" :gutter="24">
            <WangEditor v-model="form.commodityDetail" :height="400" style="width: calc(100% - 12px); margin-left: 12px;" />
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <el-footer>
      <el-button type="primary" @click="submitCommodity">提交</el-button>
      <el-button type="primary" @click="returnPage">返回上一页</el-button>
    </el-footer>
  </div>
</template>

<script>
import WangEditor from '../../../components/WangEditor/index'
import { uploadPath } from '@/api/upload'
import { classList, productLabelList } from '@/api/customAPI/shop/CommodityClassification'
import { addCommodity, getInfoById } from '@/api/commodity'
import GoodsSku from '../../../components/GoodsSku/index'
import { Loading } from 'element-ui'
import ExtendsSku from '../../../components/ExtendsSku/index'
export default {
  name: 'AddCommodity',
  components: {
    ExtendsSku,
    GoodsSku, WangEditor },
  data() {
    var valiIcon = (rule, value, callback) => {
      if (!this.form.commodityImage || this.form.commodityImage.length <= 0) {
        callback(new Error('请上传商品图片'))
      } else {
        callback()
      }
    }
    var valiTiJi = (rule, value, callback) => {
      if (!this.form.length || this.form.length.length <= 0) {
        callback(new Error('请输入商品外包装长度，如有小数可四舍五入取整数'))
      } else if (!this.form.width || this.form.width.length <= 0) {
        callback(new Error('请输入商品外包装宽度，如有小数可四舍五入取整数'))
      } else if (!this.form.height || this.form.height.length <= 0) {
        callback(new Error('请输入商品外包装高度，如有小数可四舍五入取整数'))
      } else {
        callback()
      }
    }
    return {
      id: '',
      limitCount: 5,
      hideUpload: false,
      hideImgUpload: false,
      props: { multiple: true },
      uploadPath,
      path: '/image',
      total: 0,
      limit: 15,
      page: 1,
      radio: '',
      regualrList: [],
      regualrCombo: [],
      extral: [],
      isEditGoods: false,
      isCopyGoods: false,
      goodsId: null,
      form: {
        commodityName: '',
        commodityNameTag: '',
        commodityHighlights: '',
        commodityImage: [],
        commodityVideo: '',
        commodityClass: [],
        commodityLabel: [],
        commodityType: 'sale',
        prepaymentPrice: '',
        priceAfter: '',
        radio: 0,
        radio1: '0',
        percent: '',
        fix: '',
        cost: '',
        originalPrice: '',
        vIPPrice: '0',
        share: '',
        weight: 0,
        length: 0,
        width: 0,
        height: 0,
        commodityDetail: null,
        regualr: null,
        extral: null
      },
      disabled: false,
      videoFlag: false,
      classOptions: [],
      labelOptions: [],
      rules: {
        commodityName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        commodityImage: [
          { required: true, validator: valiIcon }
        ],
        commodityClass: [
          { required: true, message: '商品分类不能为空', trigger: 'change' }
        ],
        commodityLabel: [
          { type: 'array', required: true, message: '商品标签不能为空', trigger: 'change' }
        ],
        commodityType: [
          { required: true, message: '商品类型不能为空', trigger: 'change' }
        ],
        radio: [
          { required: true, message: '推广类型不能为空', trigger: 'change' }
        ],
        priceAfter: [
          { required: true, message: '价格后缀不能为空', trigger: 'blur' }
        ],
        prepaymentPrice: [
          { required: true, message: '预付金价格不能为空', trigger: 'change' }
        ],
        cost: [
          { required: true, message: '成本价格不能为空', trigger: 'blur' }
        ],
        originalPrice: [
          { required: true, message: '原价价格不能为空', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '商品重量不能为空', trigger: 'blur' }
        ],
        tiji: [
          { required: true, validator: valiTiJi, trigger: 'blur' }
        ],
        commodityDetail: [
          { required: true, message: '商品详情不能为空', trigger: 'change' },
          { max: 5000, message: '商品详情内容长度超过5000个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'form.commodityType': {
      handler(newVal, oldVal) {
        if (this.form.commodityType == 'lease') {
          this.form.vIPPrice = '0'
        }
      }
    },
    deep: true,
    immediate: true
  },
  mounted() {
    if (this.isCopyGoods) {
      const loadingInstance = Loading.service({ fullscreen: true })
      getInfoById({ goodsId: this.goodsId }).then(response => {
        const goodsInfo = response.data.data
        if (goodsInfo.vIPPrice) {
          this.form.vIPPrice = goodsInfo.vIPPrice.toString()
        } else {
          this.form.vIPPrice = '0'
        }
        this.regualrList = goodsInfo.regualrList
        this.regualrCombo = goodsInfo.regualrCombo
        this.extral = goodsInfo.extral
        this.form.commodityImage = goodsInfo.commodityImage.map((item, index) => {
          return {
            name: 'image' + index,
            url: this.$parseImgUrl(item),
            imgUrl: item
          }
        })
        this.hideUpload = this.form.commodityImage.length >= this.limitCount
        console.log(goodsInfo)
        this.form.commodityName = goodsInfo.commodityName
        this.form.commodityNameTag = goodsInfo.commodityNameTag
        this.form.commodityHighlights = goodsInfo.commodityBrief
        this.hideImgUpload = true
        this.form.commodityVideo = goodsInfo.commodityVideo
        this.form.commodityClass = [goodsInfo.commodityClass, goodsInfo.commoditySubClass]
        goodsInfo.commodityLabel.forEach(item => {
          this.form.commodityLabel.push(parseInt(item))
        })
        console.log('复制', this.form.commodityLabel)
        this.form.commodityType = goodsInfo.commodityType

        this.form.radio = JSON.stringify(goodsInfo.radio)
        if (goodsInfo.percent) {
          this.form.radio1 = '0'
          this.form.percent = goodsInfo.percent
        } else if (goodsInfo.fix) {
          this.form.radio1 = '1'
          this.form.fix = goodsInfo.fix
          console.log(this.form.fix)
        }
        this.form.cost = goodsInfo.cost
        this.form.originalPrice = goodsInfo.orginalPrice
        this.form.share = goodsInfo.share
        this.form.prepaymentPrice = goodsInfo.deposit
        this.form.commodityDetail = goodsInfo.commodityDetail ? goodsInfo.commodityDetail : ''
        this.form.priceAfter = goodsInfo.unit
        this.form.weight = goodsInfo.weight
        this.form.length = goodsInfo.length != undefined ? goodsInfo.length : 0
        this.form.width = goodsInfo.width != undefined ? goodsInfo.width : 0
        this.form.height = goodsInfo.height != undefined ? goodsInfo.height : 0
        loadingInstance.close()
      }).catch(res => {
        loadingInstance.close()
        this.$message.error('无法复制商品，获取商品信息失败')
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      })
    } else if (this.isEditGoods) {
      const loadingInstance = Loading.service({ fullscreen: true })
      getInfoById({ goodsId: this.goodsId }).then(response => {
        const goodsInfo = response.data.data
        if (goodsInfo.vIPPrice) {
          this.form.vIPPrice = goodsInfo.vIPPrice.toString()
        } else {
          this.form.vIPPrice = '0'
        }

        this.regualrList = goodsInfo.regualrList
        this.regualrCombo = goodsInfo.regualrCombo
        this.extral = goodsInfo.extral
        this.form.commodityImage = goodsInfo.commodityImage.map((item, index) => {
          return {
            name: 'image' + index,
            url: this.$parseImgUrl(item),
            imgUrl: item
          }
        })
        this.hideUpload = this.form.commodityImage.length >= this.limitCount
        this.form.commodityName = goodsInfo.commodityName
        this.form.commodityNameTag = goodsInfo.commodityNameTag
        this.form.commodityHighlights = goodsInfo.commodityBrief
        this.hideImgUpload = true
        this.form.commodityVideo = goodsInfo.commodityVideo
        this.form.commodityClass = [goodsInfo.commodityClass, goodsInfo.commoditySubClass]

        goodsInfo.commodityLabel.forEach(item => {
          this.form.commodityLabel.push(parseInt(item))
        })
        console.log('编辑', this.form.commodityLabel)
        this.form.commodityType = goodsInfo.commodityType

        this.form.radio = JSON.stringify(goodsInfo.radio)
        console.log(goodsInfo)
        if (goodsInfo.percent && goodsInfo.percent > 0) {
          this.form.radio1 = '0'
          this.form.percent = goodsInfo.percent
        } else if (goodsInfo.fix && goodsInfo.fix > 0) {
          this.form.radio1 = '1'
          this.form.fix = goodsInfo.fix
          console.log(this.form.fix)
        }
        this.form.cost = goodsInfo.cost
        this.form.originalPrice = goodsInfo.orginalPrice
        this.form.share = goodsInfo.share
        this.form.commodityDetail = goodsInfo.commodityDetail ? goodsInfo.commodityDetail : ''
        this.form.priceAfter = goodsInfo.unit
        this.form.weight = goodsInfo.weight
        this.form.length = goodsInfo.length != undefined ? goodsInfo.length : 0
        this.form.width = goodsInfo.width != undefined ? goodsInfo.width : 0
        this.form.height = goodsInfo.height != undefined ? goodsInfo.height : 0
        loadingInstance.close()
      }).catch(res => {
        loadingInstance.close()
        this.$message.error('无法编辑商品，获取商品信息失败')
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      })
    } else {
      this.isCopyGoods = false
      this.isEditGoods = false
      this.goodsId = null
      this.form.commodityDetail = ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    /** 超出上传数量隐藏上传按钮*/
    isOverLimit(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
    },
    onRemove(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.form.commodityImage, item => item.uid === file.uid)
      if (index >= 0) {
        this.form.commodityImage.splice(index, 1)
      }
    },
    /** 页面初始化*/
    init() {
      const params = this.$dd(this.$route.query.p)
      if (params && params.copy) {
        this.isCopyGoods = true
        this.goodsId = params.goodsId
      } else if (params && params.edit) {
        this.isEditGoods = true
        this.goodsId = params.goodsId
      }

      classList().then(response => {
        this.classOptions = response.data.data
      })
      const labelData = {
        shopId: 1,
        page: 1,
        limit: 0
      }
      productLabelList(labelData).then(response => {
        const labelList = response.data.data.data
        labelList.forEach(item => {
          const label = {
            value: item.id,
            label: item.name
          }
          this.labelOptions.push(label)
        })
      })
    },
    // 图片大小限制
    beforeAvatarUpload: function(file) {
      const isImg = (file.type === 'image/jpeg' || file.type === 'image/png')
      const isSize = file.size / 1024 / 1024 < 2

      if (!isImg) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
      }
      if (!isSize) {
        this.$message.error('上传图片大小不能超过2MB!')
      }
      return isImg && isSize
    },
    uploadCommodityUrl(res, file) {
      file.imgUrl = res.data.relativePath
      this.form.commodityImage.push(file)
    },
    // 上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50
      if (['video/mp4'].indexOf(file.type) === -1) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        this.$message.error('视频大小不能超过50MB')
        return false
      }
    },
    // 进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = file.percentage.toFixed(0) * 1
    },
    // 上传成功回调
    handleVideoSuccess(res, file) {
      this.videoFlag = false
      this.videoUploadPercent = 1
      this.form.commodityVideo = res.data.relativePath
      // 前台上传地址
      // if (file.status == 'success' ) {
      //    this.videoForm.showVideoPath = file.url;
      // } else {
      //     layer.msg("上传失败，请重新上传");
      // }

      // 后台上传地址
      /* if (res.Code === 0) {
        this.videoForm.showVideoPath = res.Data
      } else {
        this.$message.error(res.Message)
      }*/
    },
    changeGoodsSku(regualr, skuFormData) {
      if (skuFormData.regualrList.length === 0) {
        this.disabled = false
      } else {
        this.disabled = true
      }
      this.form.regualr = regualr
    },
    changeClass() {
      if (this.form.commodityClass.length < 2) {
        this.form.commodityClass = []
        return this.$message.error('请选择商品二级分类')
      }
    },
    returnPage() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    // 提交
    submitCommodity() {
      if (!this.form.commodityName) {
        return this.$message({ type: 'error', message: '商品名称不能为空' })
      }
      if (!this.form.commodityImage || this.form.commodityImage.length <= 0) {
        return this.$message({ type: 'error', message: '请至少上传一张商品图片' })
      }
      if (!this.form.commodityClass || this.form.commodityClass.length <= 0) {
        return this.$message({ type: 'error', message: '商品分类不能为空' })
      }
      if (!this.form.commodityLabel || this.form.commodityLabel.length <= 0) {
        return this.$message({ type: 'error', message: '商品标签不能为空' })
      }
      if (this.form.radio == '1' && this.form.radio1 == '0' && this.form.percent == 0) {
        return this.$message.error('推广分成比例不能为零')
      } else if (this.form.radio == '1' && this.form.radio1 == '1' && this.form.fix == 0) {
        return this.$message.error('推广固定分成不能为零')
      }
      if (!this.form.priceAfter) {
        return this.$message({ type: 'error', message: '价格后缀不能为空' })
      }
      if (!this.$refs.goodsSku.validate()) {
        return
      }

      if (!this.$refs.extendsSku.validate()) {
        return
      }

      if (!this.form.commodityDetail || this.form.commodityDetail.length <= 0) {
        return this.$message({ type: 'error', message: '商品详情不能为空' })
      }

      const extral = this.$refs.extendsSku.getData()
      if (this.isCopyGoods) {
        if (extral && extral.length > 0) {
          extral.forEach(item => {
            if (item.specInfoId) {
              item.specInfoId = null
              item.values.forEach(inf => {
                if (inf.specId) {
                  inf.specId = null
                }
              })
            }
          })
        }
        this.form.regualr.forEach(info => {
          if (info.productId) {
            info.productId = null
          }
        })
      }

      const data = {
        commodityName: this.form.commodityName,
        commodityBrief: this.form.commodityHighlights,
        commodityNameTag: this.form.commodityNameTag,
        commodityImage: this.form.commodityImage.map(item => {
          return item.imgUrl
        }),
        commodityVideo: this.form.commodityVideo,
        commodityClass: this.form.commodityClass.slice(-1)[0],
        commodityLabel: this.form.commodityLabel,
        commodityType: this.form.commodityType,
        radio: this.form.radio,
        percent: this.form.radio1 === '0' ? this.form.percent : null,
        fix: this.form.radio1 === '1' ? this.form.fix : null,
        cost: this.form.cost,
        orginalPrice: this.form.originalPrice,
        deposit: this.form.prepaymentPrice,
        share: this.form.share,
        weight: this.form.weight,
        length: this.form.length,
        width: this.form.width,
        height: this.form.height,
        commodityDetail: this.form.commodityDetail,
        regualr: this.form.regualr,
        extral: extral,
        unit: this.form.priceAfter,
        vIPPrice: this.form.vIPPrice
      }

      if (this.isEditGoods) {
        data['commodityId'] = this.goodsId
      }

      console.log(data)

      const loadingInstance = Loading.service({ fullscreen: true })

      addCommodity(data).then(response => {
        console.log(response.data)
        loadingInstance.close()
        if (this.isEditGoods) {
          this.$message.success('编辑商品成功')
        } else {
          this.$message.success('新增商品成功')
        }
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      }).catch(res => {
        loadingInstance.close()
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.AddCommodity {
  padding: 30px;

  .ele-content {
    padding: 20px 30px;
    padding-bottom: 0px;
    margin-bottom: 30px;
    border: 1px solid #eee;

    .cus-input {
      width: 100%;
      max-width: 400px;
      ::v-deep .el-input__inner{
        padding-right: 42px;
      }
    }
    ::v-deep .hide {
      .el-upload--picture-card {
        display: none !important;
      }
    }
  }

  .goods-tiji {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    &-item {
      margin-right: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;

      ::v-deep .el-input__inner {
        padding-left: 30px;
        padding-right: 30px;
      }

      &-chang {
        ::v-deep .el-input:before {
          content: '长';
          position: absolute;
          left: 10px;
          color: #999999;
          font-weight: bold;
        }
        ::v-deep .el-input:after {
          content: 'cm';
          position: absolute;
          right: 10px;
          color: #999999;
          font-weight: bold;
        }
      }

      &-kuan {
        ::v-deep .el-input:before {
          content: '宽';
          position: absolute;
          left: 10px;
          color: #999999;
          font-weight: bold;
        }
        ::v-deep .el-input:after {
          content: 'cm';
          position: absolute;
          right: 10px;
          color: #999999;
          font-weight: bold;
        }
      }

      &-gao {
        ::v-deep .el-input:before {
          content: '高';
          position: absolute;
          left: 10px;
          color: #999999;
          font-weight: bold;
        }
        ::v-deep .el-input:after {
          content: 'cm';
          position: absolute;
          right: 10px;
          color: #999999;
          font-weight: bold;
        }
      }

    }
  }

}
</style>
